<template>
  <!-- 右侧导航栏 -->
  <div class="nav-bar">
    <ul>
      <li
        class="go_box"
        v-for="(item, index) in navlist"
        :key="index"
        @click="go_box(index)"
      >
        <span>{{ item }}</span>
      </li>
    </ul>
  </div>
</template>
<script src="https://statics.jcpeixun.com/common/jquery-1.11.3.js"></script>
<script>
export default {
  name: 'nav-bar',
  data() {
    return {
      navlist: ["机构简介", "课程特色", "行业应用", "学习收获", "学员反馈", "课程分类", "基地实景", "教学资质", "师资力量", "服务保障", "常见问题", "顶部▲"],//导航栏
    }
  },
  mounted() {

  },
  methods: {
    // 右侧导航栏
    go_box(id) {
      id++;
      // includes()函数 是否属于数组内元素
      let num = 100;
      // 对不同的模块 滚动距离适配
      if ([1, 2].includes(parseInt(id))) {
        num = 120
      }
      if ([3, 7, 9, 10, 11].includes(parseInt(id))) {
        num = 70
      }
      if ([4, 5, 6].includes(parseInt(id))) {
        num = 60
      }
      id && $('html,body').animate({
        scrollTop: $('#' + id).offset().top - num
      }, 800);
    }
  },
}
</script>
<style lang="scss">
@import "./../assets/scss/mixin.scss";
// 导航栏
.nav-bar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  width: auto;
  text-align: center;
  border-radius: 12px 0px 0px 12px;
  overflow: hidden;
  z-index: 2;

  ul {
    width: 85px;
    height: auto;
    opacity: 1;
    border-radius: 8px;
    box-shadow: 0px 6px 12px 0px rgb(0 0 0 / 10%);

    li {
      width: 85px;
      height: 42px;
      line-height: 42px;
      background: #ccddff;
      cursor: pointer;

      span {
        font-size: 14px;
        line-height: 42px;
        color: #1c1c28;
      }
    }

    li.active {
      font-size: 14px;
      align-items: center;
      background: #3e7bfa;

      span {
        color: #ffffff;
      }
    }

    li:last-child {
      color: #3e7bfa;
    }
  }
}
</style>